<!-- <script src="/BackStage/js/jquery-1.8.3.js"></script> -->
<script src="./js/jquery.min.js"></script>

<nav class="navbar navbar-default navbar-fixed-top">
        <div class="brand">
            <a href="/BackStage/index"><img src="assets/img/logo-dark.png" alt="Klorofil Logo" class="img-responsive logo"></a>
        </div>
        <div class="container-fluid">
            <div class="navbar-btn">
                <button type="button" class="btn-toggle-fullwidth"><i class="lnr lnr-arrow-left-circle"></i></button>
            </div>
            <div id="navbar-menu">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <!-- 消息列表 -->
                        <a href="#" onclick="showmail(0);" class="dropdown-toggle icon-menu" data-toggle="dropdown">
                            <i class="lnr lnr-alarm"></i>
                            <span id="myhindicon" class="badge bg-danger"></span>
                        </a>
                        <ul class="dropdown-menu notifications" id="mail">
                            <!-- <li><a style='font-size:8px' href='#' class='notification-item'><span class='dot bg-danger'></span>发信人: 王东磊&nbsp&nbsp主题: 选车</a></li>
                            <li><a href='/BackStage/notifications' class='more'>查看全部消息</a></li> -->
                        </ul>
                        <!-- <li><a href='#' class='notification-item'><span class='dot bg-warning'></span>System space is almost full</a></li>
                        <li><a href="#" class="notification-item"><span class="dot bg-danger"></span>You have 9 unfinished tasks</a></li>
                        <li><a href="#" class="notification-item"><span class="dot bg-success"></span>Monthly report is available</a></li> -->
                        <!-- 消息列表结束 -->
                    </li>
                    <!-- 帮助开始 -->
                    <!-- <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="lnr lnr-question-circle"></i> <span>帮助</span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Basic Use</a></li>
                            <li><a href="#">Working With Data</a></li>
                            <li><a href="#">Security</a></li>
                            <li><a href="#">Troubleshooting</a></li>
                        </ul>
                    </li> -->
                    <!-- 帮助结束 -->
                    <li class="dropdown">
                        <!-- 个人板块开始 -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="assets/img/user.png" class="img-circle" alt="Avatar"> <span id="username"></span> <i class="icon-submenu lnr lnr-chevron-down"></i></a>
                        <ul class="dropdown-menu">
                            <!-- 用户名 -->
                            <li><a href="/BackStage/profile"><i class="lnr lnr-user"></i> <span>个人中心</span></a></li>
                            <!-- 用户id -->
                            <span id="staffNo" style="display:none;">1</span>
                            <!-- <li><a href="/BackStage/notifications"><i class="lnr lnr-envelope"></i> <span>消息列表</span></a></li> -->
                            <!-- <li><a href="#"><i class="lnr lnr-cog"></i> <span>设置</span></a></li> -->
                            <li><a href="/login/logout"><i class="lnr lnr-exit"></i> <span>登出</span></a></li>
                        </ul>
                        <!-- 个人板块结束 -->
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <script>
        // window.onload = function(){
        //     showmail(0);
        // }
        $().ready(function(){
            showmail(0);
            mysession();
        });

        function mysession(){
            $.ajax({
				type: "POST",
				url: "/login/mysession",
				success: function(data){
                    $('#username').text(data.staffName);
				}
			}); 
        }


        function showmail(state){
            var mail = document.getElementById('mail');
            var staffNo = document.getElementById('staffNo').innerText;
            var myhindicon = document.getElementById('myhindicon');
            // 从后台查询出未读消息，如果有，那么就插入到消息栏中，如果没有，就取消小红点，
            var hp = new XMLHttpRequest();
            hp.open('get','/message/unreadHint?mailState='+state+"&addStaffNo="+staffNo,true);
            hp.send();
            hp.onreadystatechange = function(){
                if(hp.status == 200){
                    if(hp.readyState == 4){
                        //如果有，那么就插入到消息栏中，如果没有，就取消小红点，
                        var datas = eval("("+hp.responseText+")");
                        var innermail="";
                        if(datas.length !=0){
                            myhindicon.innerHTML=datas.length;
                            for(var i=0;i<datas.length;i++){
                                innermail += "<li><a style='font-size:8px' href='#' class='notification-item'>"+
                                "<span class='dot bg-danger'></span>发信人: "+datas[i].staffName+"&nbsp&nbsp标题: "+datas[i].mailtitle+"</a></li>";
                            }
                            innermail +="<li><a href='/BackStage/inbox?mailState=0' class='more'>查看全部消息</a></li>";
                            // var innermail = "<li><a style='font-size:8px' href='#' class='notification-item'><span class='dot bg-danger'></span>发信人: 王东磊&nbsp&nbsp主题: 选车</a></li>"+
                            // "<li><a href='/BackStage/notifications' class='more'>查看全部消息</a></li>";
                            mail.innerHTML = innermail;
                        }else if(datas.length == 0){
                            myhindicon.innerHTML="";
                            mail.innerHTML = "<li><a href='#' class='more'>无未读消息</a></li>";
                        }
                       
                    }
                }
            }
        }
    </script>